<div class="shop" ng-if="zm.sidePanels.options">
  <div class="shop-title">
    <h2>Options</h2>
    <button ng-click="zm.closeSidePanels();">Close</button>
  </div>
  <div class="upgrades">
    <div class="upgrade">
      <h4>How to play</h4>
      <ul>
        <li ng-repeat="text in zm.howToPlay">{{text}}</li>
      </ul>
    </div>
    <div class="upgrade">
      <h4>Auto Start Next Level</h4>
      <p>Automatically start the next level after 3 seconds. If you want to play without actually playing.</p>
      <button ng-click="zm.toggleAutoStart();">{{zm.model.persistentData.autoStart ? "On" : "Off"}}</button>
    </div>
    <div class="upgrade">
      <h4>Render Resolution</h4>
      <p>Choose your preferred resolution to render the game.</p>
      <p>50% will run better on slower hardware but may look blurry.</p>
      <p>100% will pixel match the resolution reported by your browser.</p>
      <p>200% will double the reported values which may look better on retina devices or smartphones.</p>
      <button ng-click="zm.toggleResolution(0.5);" class="{{zm.getResolution() == 0.5 ? 'active' : ''}}">50%</button>
      <button ng-click="zm.toggleResolution(1);" class="{{zm.getResolution() == 1 ? 'active' : ''}}">100%</button>
      <button ng-click="zm.toggleResolution(2);" class="{{zm.getResolution() == 2 ? 'active' : ''}}">200%</button>
    </div>
    <div class="upgrade">
      <h4>Particle Effects</h4>
      <p>Disable particles like blood and smoke to improve performance</p>
      <button ng-click="zm.toggleParticles();">{{zm.model.persistentData.particles ? "On" : "Off"}}</button>
    </div>
    <div class="upgrade" ng-if="zm.model.deferredPrompt">
      <h4>Add to Home Screen</h4>
      <p>You can add this game to your smartphones home screen without having to install anything.</p>
      <button ng-click="zm.addToHomeScreen();">Add to Home Screen</button>
    </div>
    <div class="upgrade" ng-if="!zm.model.kongregate">
      <h4>Toggle Full Screen</h4>
      <p>Toggle full screen mode. Can be helpful on smaller screen devices.</p>
      <button ng-click="zm.model.toggleFullscreen();">Toggle Full Screen</button>
    </div>
    <div class="upgrade">
      <h4>Show Zoom Buttons</h4>
      <p>If you're unable to zoom with other methods this will add some buttons to the screen for zooming the map.</p>
      <button ng-click="zm.toggleZoomButtons();">{{zm.model.persistentData.zoomButtons ? "On" : "Off"}}</button>
    </div>
    <div class="upgrade">
      <h4>Show Framerate Counter</h4>
      <p>Used for performance testing</p>
      <button ng-click="zm.toggleShowFps();">{{zm.model.persistentData.showfps ? "On" : "Off"}}</button>
    </div>
    <div class="upgrade">
        <h4>Manage Save</h4>
        <p>Import or export a saved game</p>
        <label class="blood">Warning: Importing a save game will overwrite your current progress</label>
        <a ng-if="zm.model.encodedContent" href="{{zm.model.encodedContent}}" download="{{zm.model.savefilename}}" class="button">
          <button>Download Save File</button>
        </a>
        <button onclick="document.getElementById('import-file').click();">Import Save</button>
        <input type="file" id="import-file" name="import-file" enctype="multipart/form-data" accept=".sav" hidden custom-on-change="zm.model.importFile"/>
        <button ng-click="zm.model.loadFromPlayFab(true)" ng-if="zm.model.playFabId" class="mt-5" ng-disabled="!zm.model.allowPlayFabAction()">Load from Cloud</button>
        <button ng-click="zm.model.saveToPlayFab()" ng-if="zm.model.playFabId" class="mt-5" ng-disabled="!zm.model.allowPlayFabAction()">Save to Cloud</button>
      </div>
    <div class="upgrade">
      <h4>Reset Game</h4>
      <p>This will reset all save data if you want to start from the very beginning again.</p>
      <button ng-click="zm.resetGame();">Reset Game</button>
    </div>
  </div>
</div>